<template>
    <div>
        <mj-title type="h2" title="Result 处理结果"></mj-title>
        <div class="page-desc">结果页用于对用户进行的一系列任务处理结果进行反馈。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-result title="标题" desc="结果描述" extra="其他补充信息，自带灰底效果">
                    <template #actions>操作建议，一般放置按钮组</template>
                </mj-result>
                <mj-divider>基本结构</mj-divider>
                <ul class="page-list">
                    <li>结构包含 <code>处理结果</code>，<code>补充信息</code> 以及 <code>操作建议</code> 三个部分，其中 <code>处理结果</code> 由 <code>提示图标</code>，<code>标题</code> 和 <code>结果描述</code> 组成。</li>
                </ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-result title="标题" desc="结果描述" extra="其他补充信息，自带灰底效果">
                                &lt;template #actions>操作建议，一般放置按钮组&lt;/template>
                            &lt;/mj-result>
                        &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="提交成功"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-result type="success" title="提交成功">
                    <template #desc>
                        提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。灰色区域可以显示一些补充的信息。
                    </template>
                    <template #extra>
                        已提交申请，等待部门审核。
                    </template>
                    <template #actions>
                        <mj-button type="primary">返回列表</mj-button>
                        <mj-button>查看项目</mj-button>
                        <mj-button>打印</mj-button>
                    </template>
                </mj-result>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-result type="success" title="提交成功">
                                &lt;template #desc>
                                    提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。灰色区域可以显示一些补充的信息。
                                &lt;/template>
                                &lt;template #extra>
                                    已提交申请，等待部门审核。
                                &lt;/template>
                                &lt;template #actions>
                                    &lt;mj-button type="primary">返回列表&lt;/mj-button>
                                    &lt;mj-button>查看项目&lt;/mj-button>
                                    &lt;mj-button>打印&lt;/mj-button>
                                &lt;/template>
                            &lt;/mj-result>
                        &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="提交失败"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-result type="error" title="提交失败">
                    <template #desc>
                        请核对并修改以下信息后，再重新提交。
                    </template>
                    <template #extra>
                        <div>您提交的内容有如下错误：</div>
                        <div>
                            <Icon type="error-circle" color="#ed4014" />
                            您的账户已被冻结
                            <a href="" class="ml15">
                                立即解冻 <Icon type="arrow-right" />
                            </a>
                        </div>
                        <div>
                            <Icon type="error-circle" color="#ed4014" />
                            您的账户还不具备申请资格
                            <a href="" class="ml15">
                                立即升级 <Icon type="arrow-right" />
                            </a>
                        </div>
                    </template>
                    <template #actions>
                        <mj-button type="primary">返回修改</mj-button>
                    </template>
                </mj-result>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-result type="error" title="提交失败">
                                &lt;template #desc>
                                    请核对并修改以下信息后，再重新提交。
                                &lt;/template>
                                &lt;template #extra>
                                    &lt;div>您提交的内容有如下错误：&lt;/div>
                                    &lt;div>
                                        &lt;Icon type="error-circle" color="#ed4014" />
                                        您的账户已被冻结
                                        &lt;a href="" class="ml15">
                                            立即解冻 &lt;Icon type="arrow-right" />
                                        &lt;/a>
                                    &lt;/div>
                                    &lt;div>
                                        &lt;Icon type="error-circle" color="#ed4014" />
                                        您的账户还不具备申请资格
                                        &lt;a href="" class="ml15">
                                            立即升级 &lt;Icon type="arrow-right" />
                                        &lt;/a>
                                    &lt;/div>
                                &lt;/template>
                                &lt;template #actions>
                                    &lt;mj-button type="primary">返回修改&lt;/mj-button>
                                &lt;/template>
                            &lt;/mj-result>
                        &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="警告提示"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-result type="warning" title="出现了一个未知错误"></mj-result>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-result type="warning" title="出现了一个未知错误">&lt;/mj-result>
                        &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Result 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>type</td>
                    <td>类型，不同类型自带对应的图标，可选值为 <code>success</code> 、 <code>error</code> 、 <code>warning</code></td>
                    <td>String</td>
                    <td>info</td>
                </tr>
                <tr>
                    <td>title</td>
                    <td>标题</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>desc</td>
                    <td>结果描述</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>extra</td>
                    <td>补充信息，有默认的灰色背景</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Result Slots"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>名称</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>title</td>
                    <td>自定义标题</td>
                </tr>
                <tr>
                    <td>desc</td>
                    <td>自定义结果描述</td>
                </tr>
                <tr>
                    <td>extra</td>
                    <td>自定义补充信息</td>
                </tr>
                <tr>
                    <td>actions</td>
                    <td>操作建议，推荐放置跳转链接，按钮组等</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    methods: {

    },
}
</script>